<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs, {parse} from "qs";
import {ElMessage} from "element-plus";
import axiosInstance from "@/http";


const searchWorkingShift = ref({
  name: "",
});
const workingShiftList = ref([])
const loadWorkingShift = () =>{
  let data = qs.stringify(searchWorkingShift.value);
    axiosInstance.get("/oa/attendance/workingShift/list?" + data).then((response) => {
    if (response.data.code === 20000) {
      workingShiftList.value = response.data.data;
      console.log(workingShiftList.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}


const dialogTitle = ref('新建班次');
const dialogVisible = ref(false);
const handleClose = () =>{
  if (confirm('确定要关闭此弹窗?')) {
    dialogVisible.value = false;
    saveWorkingShiftForm.value = {
      checkInBeginMin: '60',
      checkInEndMin: '60',
      checkOutEndMin: '60',
      seriouslyLate: '30',
      lateAbsences: '60'
    }
    showIcon.value = false;
  }
}
const showIcon = ref(false)
const addWorkingShift = () =>{
  dialogVisible.value = true;
  dialogTitle.value = '新建班次';
  isSave.value = true
}
const isRest = ref(false)
const saveWorkingShiftForm = ref({
  name: '',
  checkInBeginMin: '60',
  checkInTime: '',
  checkInEndMin: '60',
  checkOutTime: '',
  checkOutEndMin: '60',
  seriouslyLate: '30',
  lateAbsences: '60',
  restStartTime: '',
  restEndTime: ''
})

//新增班次
const saveWorkingShift = () =>{
    if (saveWorkingShiftForm.value.checkInTime === '' || saveWorkingShiftForm.value.checkInTime === null){
        ElMessage.error("上班时间不能为空");
        return;
    }
    if (saveWorkingShiftForm.value.checkOutTime === '' || saveWorkingShiftForm.value.checkOutTime === null){
        ElMessage.error("下班时间不能为空");
        return;
    }
  let data = qs.stringify(saveWorkingShiftForm.value);
    console.log("新增班次数据",saveWorkingShiftForm.value);
    axiosInstance.post("/oa/attendance/workingShift/add",data).then((response)=>{
    if (response.data.code === 20000){
      ElMessage.success("保存成功");
      dialogVisible.value = false;
      saveWorkingShiftForm.value = {
        checkInBeginMin: '60',
        checkInEndMin: '60',
        checkOutEndMin: '60',
        seriouslyLate: '30',
        lateAbsences: '60'
      }
      loadWorkingShift();
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
const deleteWorkingShift = (id) =>{
  if (confirm('确定要删除此班次?')) {
    console.log(id)
      axiosInstance.post("/oa/attendance/workingShift/deleteById/"+id).then((response)=>{
      if (response.data.code === 20000){
        ElMessage.success("删除成功");
        loadWorkingShift();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
const isSave = ref(true)
const workingShiftInfo = (id) =>{
  dialogVisible.value = true;
  dialogTitle.value = '班次详情';
    axiosInstance.get("/oa/attendance/workingShift/getInfo/"+id).then((response)=>{
    if (response.data.code === 20000){
      saveWorkingShiftForm.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
  isSave.value = false
}


onMounted(()=>{
  loadWorkingShift();
})
</script>

<template>
  <div class="user-management">
    <header class="header">
      <span class="title">班次规则</span>
      <el-button type="primary" @click="addWorkingShift">新建班次</el-button>
    </header>

    <!-- 新增弹窗 -->
    <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        class="user-dialog"
        :before-close="handleClose"
    >
      <el-form label-position="top" class="dialog-form">

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="班次名称">
              <el-input placeholder="请输入班次名称" v-model="saveWorkingShiftForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="上班时间" >
              <el-time-select
                  v-model="saveWorkingShiftForm.checkInTime"
                  style="width: 240px"
                  start="00:00"
                  step="00:15"
                  end="23:59"
                  placeholder="选择上班时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上班时间">
              <el-time-select
                  v-model="saveWorkingShiftForm.checkOutTime"
                  style="width: 240px"
                  start="00:00"
                  step="00:15"
                  end="23:59"
                  placeholder="选择下班时间"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-switch inactive-text="休息时间" v-model="isRest"></el-switch>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="开始时间" >
              <el-time-select
                  :disabled="!isRest"
                  v-model="saveWorkingShiftForm.restStartTime"
                  style="width: 240px"
                  :start=saveWorkingShiftForm.checkInTime
                  step="00:15"
                  :end=saveWorkingShiftForm.checkOutTime
                  placeholder="选择开始时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <el-time-select
                  :disabled="!isRest"
                  v-model="saveWorkingShiftForm.restEndTime"
                  style="width: 240px"
                  :start=saveWorkingShiftForm.restStartTime
                  step="00:15"
                  :end=saveWorkingShiftForm.checkOutTime
                  placeholder="选择结束时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            更多选项
            <el-icon v-show="!showIcon" @click="showIcon=true"><ArrowDown /></el-icon>
            <el-icon v-show="showIcon" @click="showIcon=false"><ArrowUp /></el-icon>
          </el-col>
        </el-row>

        <el-row v-show="showIcon" :gutter="10">
          <span style="font-size: 14px; vertical-align: middle;">提前</span>
          <el-col :span="2" >
            <el-form-item >
              <el-input v-model="saveWorkingShiftForm.checkInBeginMin"></el-input>
            </el-form-item>
          </el-col>
          <span style="font-size: 14px; vertical-align: middle;">分钟开始上班考勤</span>
        </el-row>
        <el-row v-show="showIcon" :gutter="10">
          <span style="font-size: 14px; vertical-align: middle;">延迟</span>
          <el-col :span="2" >
            <el-form-item >
              <el-input v-model="saveWorkingShiftForm.checkInEndMin"></el-input>
            </el-form-item>
          </el-col>
          <span style="font-size: 14px; vertical-align: middle;">分钟结束上班考勤</span>
        </el-row>
        <el-row v-show="showIcon" :gutter="10">
          <span style="font-size: 14px; vertical-align: middle;">延迟</span>
          <el-col :span="2" >
            <el-form-item >
              <el-input v-model="saveWorkingShiftForm.checkOutEndMin"></el-input>
            </el-form-item>
          </el-col>
          <span style="font-size: 14px; vertical-align: middle;">分钟结束下班考勤</span>
        </el-row>
        <el-row v-show="showIcon" :gutter="10">
          <span style="font-size: 14px; vertical-align: middle;">晚到</span>
          <el-col :span="2" >
            <el-form-item >
              <el-input v-model="saveWorkingShiftForm.seriouslyLate"></el-input>
            </el-form-item>
          </el-col>
          <span style="font-size: 14px; vertical-align: middle;">分钟为严重迟到</span>
        </el-row>
        <el-row v-show="showIcon" :gutter="10">
          <span style="font-size: 14px; vertical-align: middle;">晚到</span>
          <el-col :span="2" >
            <el-form-item >
              <el-input v-model="saveWorkingShiftForm.lateAbsences"></el-input>
            </el-form-item>
          </el-col>
          <span style="font-size: 14px; vertical-align: middle;">分钟为旷工</span>
        </el-row>

      </el-form>

      <template #footer>
        <el-button @click="handleClose" v-show="isSave">取消</el-button>
        <el-button type="primary" @click="saveWorkingShift" v-show="isSave">保存</el-button>
      </template>

    </el-dialog>

    <!--    搜索卡片-->
    <el-card class="search-card">
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item label="班次名称" >
          <el-input
              placeholder="请输入班次名称"
              v-model="searchWorkingShift.name"
              @keydown.enter="loadWorkingShift"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadWorkingShift">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--查询列表-->
    <el-card>
      <el-table class="user-table" :data="workingShiftList">
          <el-table-column type="index" label="编号" width="80" align="center"/>
          <el-table-column prop="name" label="班次名称" align="center"/>
        <el-table-column prop="checkInTime" label="上班时间" align="center"/>
        <el-table-column prop="checkOutTime" label="下班时间" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="workingShiftInfo(scope.row.id)">查看</el-button>
            <el-button link type="danger" size="small" @click="deleteWorkingShift(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.user-management {
  padding: 20px;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.user-dialog {
  width: 600px;
  padding: 30px;
  display: flex;
  align-items: center;
}

.dialog-form {
  max-width: 750px;
}

.search-card {
  margin: 20px 0;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-input {
  width: 200px;
}

.user-table {
  border-radius: 5px;
  overflow: hidden;
}

.user-table .el-table th {
  background-color: #eaeaea;
}

.reset-button {
  margin-right: 10px;
}
</style>